<template>
  <div>
    <newHeader></newHeader>
    <swiperComponent></swiperComponent>
    <div class="m-content wrapbox clearfix">
      <div class="m-leftbar">

        <!-- s 热门tab -->
        <div class="m-hotnav" v-show="isLogin">
          <ul class="clearfix">
            <li :class="{focus:tab==-1}">
              <a @click="getArtical(-1)">全部</a>
            </li>
            <li :class="{focus:tab==1}">
              <a @click="getArtical(1)">文章</a>
            </li>
            <li :class="{focus:tab==2}">
              <a @click="getArtical(2)">日记</a>
            </li>
            <li :class="{focus:tab==3}">
              <a @click="getArtical(3)">资讯</a>
            </li>
            <li :class="{focus:tab==4}">
              <a @click="getArtical(4)">收藏</a>
            </li>
          </ul>
        </div>


        <div class="m-hotnav" v-show="!isLogin">
          <h2 class="sider-title">币推荐</h2>
        </div>

        <!-- s 标题列表 -->
        <div class="m-itemlist">

          <!-- s item -->
          <div class="m-itembox" v-for="ite in article.records">
            <a v-show="ite.newsUrl!=''" :href="ite.newsUrl" target="view_window" class="btnmore">查看全文</a>
            <div class="tit">
              <router-link v-bind="{to:'/circleDetail/'+ ite.id}">{{ite.title}}</router-link>
            </div>
            <div class="time">{{ite.infopubldate}}</div>
            <div class="txt">{{ite.contentAbstract}}</div>
            <div class="ft clearfix">
              <div class="tips">
                <i class="s"></i>
                <span :class="'tag'+((index%3)+1)" v-for="(tag,index) in ite.tags">{{tag.name}}</span>
                <!--<span style="color:#B795F9;border-color:#B795F9;">cdc</span>-->
                <!--<span style="color:#FF8DA9;border-color:#FF8DA9;">区块链</span>-->
                <!--<span style="color:#3F9BFE;border-color:#3F9BFE;">监管政策</span>-->
              </div>

              <div class="list">
                <ul>
                  <!-- 展开状态添加 class zan-up -->
                  <li class="zan" :class="{zan:true,'zan-up':ite.likeFlag}">
                    <a href="javascript:;" @click="isPraise(ite)"><i class="s"></i>{{ite.likes}}</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  </li>
                  <li class="share">
                    <a href="javascript:;" @click="showShare(ite)"><i class="s"></i>{{ite.shares}}</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <div class="sharebox" v-show="shareId==ite.id">
                      <span class="arr"></span>
                      <a href="javascript:;" :data-clipboard-text="websideUrl+'newDetail/'+ite.id" @click="copy"><img
                        src="../images/share-1.png" width="34" height="34"/>复制链接</a>
                      <a href="javascript:;" @click="open('http://service.weibo.com/share/share.php?url='+
                      encodeURIComponent(websideUrl+'newDetail/'+ite.id)+'&title=智子社区&pic=&appkey=')"><img
                        src="../images/share-2.png" width="34" height="34"/>新浪微博</a>
                      <a href="javascript:;" @click="openQQ(ite)"><img src="../images/share-3.png" width="34"
                                                                       height="34"/>QQ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                      <a href="javascript:;" :data-clipboard-text="websideUrl+'newDetail/'+ite.id" @click="copy"><img
                        src="../images/share-4.png" width="34" height="34"/>微信&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                      <span class="code"><qrcode-vue :value="websideUrl+'newDetail/'+ite.id" :size="100"
                                                     level="H"></qrcode-vue></span>
                    </div>
                  </li>
                  <li class="comment">
                    <a href="javascript:;" @click="showComment(ite.id)"><i class="s"></i>{{ite.comments}}</a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- s 评论模块 -->


            <div class="m-comment" v-show="ite.id==commentID">
              <div class="setmsg">
                <textarea v-model="commentContent" name="" rows="" cols="" placeholder="说点什么..."></textarea>
                <p class="btn">
                  <a href="javascript:;" @click="addComment(ite)">发表评论</a>
                </p>
              </div>

              <div class="m-comment-list" v-for="teg in commentList.records">
						<span class="pic">
    		            <img src="images/img01.png" width="62" height="62" alt=""/>
    		        </span>
                <div class="hd clearfix">
                  <ul class="cxbar">
                    <li>
                      <a href="javascript:;" @click="praiseComment(teg.businessData)"><i class="s"
                                                                                         :class="{s:true,'s-up':teg.businessData.likeInd!=0}"></i>{{teg.businessData.likes}}</a>
                    </li>
                    <li>
                      <a href="javascript:;" @click="replayComment(teg.businessData)">回复</a>
                    </li>
                    <li>
                      <a href="javascript:;" @click="report(teg)">举报</a>
                    </li>
                  </ul>
                  <span class="name">{{teg.businessData.userName}}</span>
                </div>

                <div class="bd">
                  <p class="txt">{{teg.businessData.contentStr}}</p>
                  <div class="leavemsg" v-show="teg.children!==null">
                    <div v-for="subComment in teg.children" class="lmlist">
                      <a class="det" v-show="userId==subComment.businessData.userId"
                         @click="deleteComment(ite,subComment.businessData.id)">删除</a>
                      <p>{{subComment.businessData.userName==null?'未知用户':subComment.businessData.userName}}：</p>
                      <p>{{subComment.businessData.contentStr}}</p>
                    </div>
                  </div>
                  <div class="reply" v-show="replay==teg.businessData.id">
                    <textarea v-model="commentContents" name="" rows="" cols=""
                              :placeholder="'回复  '+teg.businessData.userName==null?'未知用户':teg.businessData.userName "></textarea>
                    <p class="btn">
                      <a href="javascript:;" @click="addSubComment(ite.id,teg.businessData.id)">回复</a>
                    </p>
                  </div>
                </div>

              </div>

              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
                <span>确认删除评论</span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteCoforn">确 定</el-button>
  </span>
              </el-dialog>

              <el-dialog
                title="举报"
                :visible.sync="reportDialogVisible"
                width="30%">
                <el-select v-model="reprotValue" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <span slot="footer" class="dialog-footer">
    <el-button @click="reportDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="conformReport">确 定</el-button>
  </span>
              </el-dialog>
              <!-- s 点击加载更多-->
              <a href="#" class="morebtn">
                <span></span>
              </a>
              <!-- e 点击加载更多-->


              <!-- e 弹窗 -->
            </div>
          </div>
          <!-- s item -->

        </div>
        <!-- e 标题列表 -->


        <!-- s 翻页 -->
        <!--<div class="pagination">-->
        <!--<a class="prev" href="javascript:;">下一页</a>-->
        <!--<a class="cur" href="javascript:;">1</a>-->
        <!--<a href="javascript:;">2</a>-->
        <!--<a href="javascript:;">3</a>-->
        <!--<span>...</span>-->
        <!--<a href="javascript:;">999</a>-->
        <!--<a class="next" href="javascript:;">下一页</a>-->
        <!--</div>-->
        <!-- e 翻页 -->

      </div>

      <div class="m-rightbar">
        <!-- S 侧边栏 -->
        <div class="m-player" v-show="isLogin">
          <p class="pic">
            <img v-show="mysle.picUrl!=null" :src="mysle.picUrl" width="80" height="80"/>
            <img v-show="mysle.picUrl==null" src="../images/img01.png" width="80"
                 height="80"/>
          </p>
          <p class="name">{{mysle.nickname}}</p>
          <div class="numbox">
            <router-link v-bind="{to:'/MyFollow/'+ userId}" href="javascript:;" class="gz">
              <p>关注</p>
              <p>{{mysle.score}}</p>
            </router-link>
            <router-link v-bind="{to:'/MyFans/'+ userId}" href="javascript:;" class="fc">
              <p>粉丝</p>
              <p>{{mysle.fans}}</p>
            </router-link>
          </div>
        </div>
        <div class="m-hotarr">
          <div class="hd">
            <h2 class="sider-title">热门标签</h2>
          </div>
          <div class="bd">
            <ul class="list clearfix">
              <li v-for="plat in hotPlate">
                <router-link v-bind="{to:'/platDetail/'+ plat.id}">{{plat.name}}</router-link>
              </li>
              <!--<li><a href="#">区块链</a></li>-->
              <!--<li><a href="#">区块链</a></li>-->
              <!--<li><a href="#">区块链</a></li>-->
              <!--<li><a href="#">区块链</a></li>-->
              <!--<li><a href="#">区块链</a></li>-->
              <!--<li><a href="#">区块链</a></li>-->
              <!--<li><a href="#">区块链</a></li>-->
              <!--<li><a href="#">区块链</a></li>-->
            </ul>
          </div>
        </div>

        <div class="m-rank">
          <div class="hd">
            <h2 class="sider-title">达人榜</h2>
            <router-link class="more" v-bind="{to:'/Master/'+userId}">更多</router-link>
          </div>
          <div class="bd">
            <ul class="list">
              <li v-for="item in MasterList">
                <div class="btn">
                  <span class="pic"> <router-link v-bind="{to:'/MySlef/'+ item.userId}">
                    <img v-show="item.picUrl!=null" :src="item.picUrl" width="40" height="40"/>
                    <img v-show="item.picUrl==null" src="../images/img01.png" width="40" height="40"/></router-link>
                  </span>
                  <div class="master">
                    <p class="name">{{item.nickname==null?"未知用户":item.nickname}}</p>
                    <p class="time">{{item.fans}} 粉丝</p>
                  </div>
                  <a class="addfocus" @click='isFocus(item.userId)'>+ 关注</a>
                </div>
                <p class="txt">{{item.profile}}</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- E 侧边栏 -->
      </div>

    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import newHeader from '@/components/NewHeader'
  import bottom from '@/components/Bottom'
  import swiperComponent from '@/components/SSwiper'
  import {mapGetters} from 'vuex'
  import Clipboard from 'clipboard';
  import QrcodeVue from 'qrcode.vue';

  export default {
    components: {
      bottom,
      newHeader,
      swiperComponent,
      Clipboard,
      QrcodeVue

    },
    data() {
      return {
        tab: -1,
        article: [],
        ishow: false,
        commentID: 0,
        isShow: false,
        mysle: '',
        picurl: '',
        MasterList: '',
        size: 6,
        commentContent: '',
        commentList: '',
        replay: '',
        hotPlate: [],
        commentContents: '',
        items: null,
        commentDetail: null,
        dialogVisible: false,
        reprotValue: 0,
        reportDialogVisible: false,
        reportId: '',
        shareId: 0,
        options: [{
          value: 0,
          label: '垃圾营销'
        }, {
          value: 1,
          label: '不实信息'
        }, {
          value: 2,
          label: '有害信息'
        }, {
          value: 3,
          label: '违法信息'
        }, {
          value: 4,
          label: '淫秽色情'
        }, {
          value: 5,
          label: '人身攻击我'
        }, {
          value: 6,
          label: '抄袭我的内容'
        }, {
          value: 7,
          label: '违规有奖活动'
        }],
      }
    },
    computed: {
      ...mapGetters({
        userId: 'userId',
        photo: 'photo',
        isLogin: 'isLogin',

      })
    },
    mounted() {
      if (this.isLogin) {
        this.getArtical(this.tab)
        this.getMysel(this.userId)
      } else {
        this.getRecommend()
      }

      this.getMasterList()
      this.$store.dispatch('updateHeadStatu', true)
      this.queryPlateList()
    },
    methods: {
      queryPlateList() {
        let params = {
          "condition": {},
          "current": 1,
          "pages": 0,
          "size": 100,
          "total": 0
        }
        this.$post('/plate/queryPlateList', params).then(response => {
          this.$check(response)
          this.hotPlate = response.data.records
        })
      }
      ,
      openQQ(item) {
        var p = {
          url: this.websideUrl + 'newDetail/' + item.id, /*获取URL，可加上来自分享到QQ标识，方便统计*/
          desc: 'QQ分享', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
          title: item.newsTitle, /*分享标题(可选)*/
          summary: '', /*分享摘要(可选)*/
          pics: '', /*分享图片(可选)*/
          flash: '', /*视频地址(可选)*/
          site: 'QQ分享', /*分享来源(可选) 如：QQ分享*/
          style: '201',
          width: 32,
          height: 32
        };
        var s = [];
        for (var i in p) {
          s.push(i + '=' + encodeURIComponent(p[i] || ''));
        }
        window.open("http://connect.qq.com/widget/shareqq/index.html?" + s.join('&'))
      }
      ,
      open(url) {
        console.log(url)
        window.open(url)
      }
      ,
      copy() {
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          this.$message.error('该浏览器不支持自动复制');
          clipboard.destroy()
        })
      }
      ,
//      	举报
      conformReport() {
        let params = {
          "commentId": this.reportId,
          "conId": 1,
          "content": this.options[this.reprotValue].label,
          "type": this.reprotValue
        }
        this.$post('/content/addContentCommentTips', params).then(response => {
          this.$check(response)
          this.$message.success('举报成功');
          this.reportDialogVisible = false

        })
      }
      ,
      report(item) {
        this.reportId = item.id
        this.reportDialogVisible = true
        this.reprotValue = 0
      }
      ,
      processList(data) {
        if (data != null && data.records != null) {

          data.records.forEach(function (v) {
            if (v.plates != null && v.plates != '') {
              var tagList = []
              var tags = v.plates.split(',')
              tags.forEach(function (n) {
                var tt = n.split(':')
                if (tt.length == 2) {
                  var tag = {
                    'id': tt[0],
                    'name': tt[1]
                  }
                  tagList.push(tag)
                }
              }, this)
              v.tags = tagList
            }
          }, this)
        }
        console.log(data)
        return data

      }
      ,
      getRecommend() {
        let params = {
          "current": 1,
          "pages": 0,
          "size": 10,
          "total": 0
        }
        this.$post('/content/queryRecommendContentList', params).then(response => {
          this.$check(response)
          this.article = this.processList(response.data)
        })
      },
      getArtical(type) {
        this.tab = type
        let params = {
          "condition": {"type": type},
          "current": 1,
          "pages": 0,
          "size": 10,
          "total": 0
        }
        this.$post('/content/queryMyAttentionContentList', params).then(response => {
          this.$check(response)
          this.article = this.processList(response.data)
        })
      }
      ,
//          获取个人信息
      getMysel(index) {
        this.$fetch('/user/getBaseUserInfo' + '?userId=' + index).then(response => {
          this.$check(response)
          this.mysle = response.data
          this.picurl = this.mysle.picUrl
        })
      }
      ,
//         获取达人信息
      getMasterList() {
        let params = {
          "condition": {},
          "current": 0,
          "pages": 0,
          "size": 10,
          "total": 0,
        }
        this.$post('/user/getMasterList', params).then(response => {
          this.$check(response)
          this.MasterList = response.data.records
        })
      }
      ,

//       达人关注
      isFocus(item) {
        console.log(item)
        let params = {
          "optType": 1,
          "type": 1,
          "value": item
        }
        this.$post('/userRef/saveUserRef', params).then(response => {
          this.$check(response)
          console.log(response)
          this.getMysel(index)
        })
      }
      ,
//         评论框
      showComment(item) {
        if (this.commentID == item) {
          this.commentID = 0
          this.commentList = []
        } else {
          this.commentID = item
          this.getComments(item)
        }
      }
      ,
//         获取评论
      addComment(item) {

        let params = {
          'conId': item.id,
          "content": this.commentContent,
          "parentId": 0
        }
        this.$post('/content/addContentComment', params).then(response => {
          this.$check(response)
          this.commentContent = ''
          this.$message.success('添加评论成功');
          this.getComments(item.id)
        })

      }
      ,
//          获取帖子的评论
      getComments(item) {
        let params = {
          "condition": {"conId": item, "userId": this.userId},
          "current": 0,
          "pages": 1,
          "size": 5,
          "total": 0
        }
        this.$post('/content/queryContentCommentList', params).then(response => {
          this.$check(response)
          this.commentList = response.data

        })
      }
      ,
//          评论的回复
      replayComment(item) {
        this.commentContent = ''
        if (this.replay == item.id) {
          this.replay = ''
        } else {
          this.replay = item.id
        }
      }
      ,
      addSubComment(item, ids) {
        this.replay = ''
        let params = {
          'conId': item,
          "content": this.commentContents,
          "parentId": ids
        }
        this.$post('/content/addContentComment', params).then(response => {
          this.$check(response)
          this.commentContents = ''
          this.$message.success('添加评论成功');
          this.getComments(item)
        })

      }
      ,
//         删除评论
      deleteComment(item, commentDetail, type) {
        console.log(item.id)
        console.log(commentDetail)
        this.items = item.id
        this.commentDetail = commentDetail
        this.dialogVisible = true
      }
      ,
      deleteCoforn() {
        this.dialogVisible = false
        this.deleteCommentProcess(this.items, this.commentDetail)
      }
      ,
      deleteCommentProcess(item, commentDetail) {
        let params = {
          'commentId': commentDetail,
          'conId': item
        }
        this.$post('/content/delContentComment', params).then(response => {
          this.$check(response)
          this.$message.success('删除评论成功');
          this.getComments(item)
        })
      }
      ,
//    评论点赞
      praiseComment(item) {
        console.log(item)
        if (item.likeInd == 0) {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 1,
            'type': 2
          }).then(response => {
            this.$check(response)
            this.$message.success('点赞成功');
            item.likeInd = 1
            item.likes += 1
          })
        } else {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 3,
            'type': 2
          }).then(response => {
            this.$check(response)
            this.$message.success('取消成功');
            item.likeInd = 0
            item.likes -= 1
          })
        }
      }
      ,
//          文章评论
      isPraise(item) {
        console.log(item)
        if (item.likeFlag == null || !item.likeFlag) {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 1,
            'type': 1
          }).then(response => {
            this.$check(response)
            this.$message.success('点赞成功');
            item.likeFlag = true
            item.likes += 1

          })
        } else {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 3,
            'type': 1
          }).then(response => {
            this.$check(response)
            this.$message.success('取消成功');
            item.likeFlag = false
            item.likes -= 1

          })
        }
      }
      ,
      showShare(item) {
        if (this.shareId == item.id) {
          this.shareId = 0
        } else {
          this.shareId = item.id
          item.shares++
        }
      }
    }
  }
</script>

<style>
  .tag1 {
    color: #B795F9;
    /*border-color: #B795F9;*/
    border: #B795F9 1px solid !important;
  }

  .tag2 {
    color: #FF8DA9;
    /*border-color: #FF8DA9;*/
    border: #FF8DA9 1px solid !important;
  }

  .tag3 {
    color: #3F9BFE;
    /*border-color: #3F9BFE;*/
    border: #3F9BFE 1px solid !important;
  }
</style>
